<template>
  <div>
    <shop-header>{{ title }}</shop-header>
    <div class="shop-user-body">
      <mt-cell class="mint-field" title="所属银行" align="left">
        <div><input v-model="bankName" @click="showBankPop" readonly placeholder="请选择" type="text" class="mint-field-core"/></div>
      </mt-cell>
      <mt-field label="开户人姓名" align="left" placeholder="请输入开户人姓名" v-model="data.bankUser"></mt-field>
      <mt-cell class="mint-field" title="开户地" align="left">
          <div><input v-model="data.bankCity" @click="showAreaPop" readonly placeholder="请选择" type="text" class="mint-field-core"/></div>
      </mt-cell>
      <mt-field label="银行卡号" align="left" placeholder="请输入银行卡号" v-model="data.bankCard"></mt-field>

      <div style="height: 15px"> </div>
      <mt-button type="danger" size="large" @click="saveAddress">保存</mt-button>
      <div style="height: 15px"> </div>
      <mt-button type="default" v-show="this.data.id != 0" size="large" @click="delAddress">删除</mt-button>
    </div>
    <mt-popup v-model="popupAreaVisible" position="bottom" class="mint-popup" style="width: 100%">
      <div style="background: #FFFFFF;padding: 10px;height: 30px;">
        <mt-button type="default" size="small" style="float: left" @click="popupAreaVisible = false">取消</mt-button>
        <mt-button type="primary" size="small" style="float: right" @click="saveArea()">保存</mt-button>
      </div>
      <div style="clear: both">
        <mt-picker :slots="slotsArea" @change="onAreaValuesChange" :show-toolbar="false" ref="picker" value-key="name"></mt-picker>
      </div>
    </mt-popup>
    <mt-popup v-model="popupBankVisible" position="bottom" class="mint-popup" style="width: 100%">
      <div style="background: #FFFFFF;padding: 10px;height: 30px;">
        <mt-button type="default" size="small" style="float: left" @click="popupBankVisible = false">取消</mt-button>
        <mt-button type="primary" size="small" style="float: right" @click="saveBank()">保存</mt-button>
      </div>
      <div style="clear: both">
        <mt-picker :slots="slotsBank" :show-toolbar="false" ref="picker2" value-key="name"></mt-picker>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import {Cell, MessageBox} from 'mint-ui';
import Header from '../components/header';
import request from "../utils/request";
import {Indicator} from 'mint-ui';
import util from "../utils/util";

export default {
  components: {
    Cell,
    shopHeader: Header,
  },
  data() {
    return {
      title: "添加银行卡",
      popupAreaVisible: false,
      popupBankVisible: false,
      oldProv: {},
      data: {
        id: 0,
        bankId: 0,
        bankUser: "",
        provinceId: 0,
        cityId: 0,
        bankCity: "",
        bankCard: "",
      },
      bankName: "",
      areas: [],
      banks: [],
      slotsArea: [
        {
          flex: 1,
          values: [""],
          className: 'slot1',
          textAlign: 'center'
        }, {
          flex: 1,
          values: [""],
          className: 'slot2',
          textAlign: 'center'
        }
      ],
      slotsBank: [
        {
          flex: 1,
          values: [""],
          className: 'slot1',
          textAlign: 'center'
        }
      ]
    }
  },
  async created() {
    let bankObj = await util.getFromCache("bankStr", "/ajax/member/bankInfo");
    this.banks = [];
    for(let i in bankObj){
      this.banks.push({id: i, name:bankObj[i]});
    }
    let id = this.$route.query.id;
    if(id && id != "0"){
      Indicator.open();
      this.title = "修改银行卡";
      const res = await request({id: parseInt(id)}, "/ajax/member/configDetail");
      if(res && res.code == 0){
        this.data = res.data;
        this.bankName = bankObj[this.data.bankId];
      }
      Indicator.close();
    }
    this.areas = await util.getFromCache("areaStr", "/ajax/member/areaList");
  },
  methods: {
    saveAddress() {
      if(!this.data.bankId){
        util.toast("请选择所属银行!");
        return;
      }
      if(!this.data.bankUser){
        util.toast("开户人姓名不能为空!");
        return;
      }
      if(!this.data.cityId){
        util.toast("请选择开户地!");
        return;
      }
      if(!/^\d+$/.test(this.data.bankCard)){
        util.toast("清输入正确的银行卡号!");
        return;
      }
      request(this.data, "/ajax/member/config" + (this.data.id != 0 ? "Edit" : "Add")).then(res => {
        if(util.warnFunc(res)) return;
        if(res.code == 0){
          util.toast("银行卡保存成功");
          this.$router.back();
        }
      });
    },
    delAddress() {
      MessageBox.confirm('确定要删除吗?').then(action => {
        request({id: this.data.id}, "/ajax/member/configDelete").then(res => {
          if(util.warnFunc(res)) return;
          if(res.code == 0){
            util.toast("删除银行卡成功");
            this.$router.back();
          }
        });
      });
    },
    onAreaValuesChange(picker, values) {
      if (values[0].id != this.oldProv.id) {
        this.$refs.picker.setSlotValues(1, values[0].children);
        this.oldProv = values[0];
      }
    },
    showBankPop() {
      this.$refs.picker2.setSlotValues(0, this.banks);
      let bank = this.banks[0];
      if(this.data.id){
        bank = this.banks.filter((i)=>i.id == this.data.bankId)[0];
      }
      this.$refs.picker2.setSlotValue(0, bank);
      this.popupBankVisible = true;
    },
    showAreaPop() {
      //设置省份
      this.$refs.picker.setSlotValues(0, this.areas);
      let prov = this.areas[0];
      if(this.data.id){
        prov = this.areas.filter((i)=>i.id == this.data.provinceId)[0];
      }
      this.$refs.picker.setSlotValue(0, prov);
      this.oldProv = prov;
      //设置城市
      this.$refs.picker.setSlotValues(1, prov.children);
      let city = prov.children[0];
      if(this.data.id){
        city = prov.children.filter((i)=>i.id == this.data.cityId)[0];
      }
      this.$refs.picker.setSlotValue(1, city);
      this.popupAreaVisible = true;
    },
    saveArea() {
      let prov = this.$refs.picker.getSlotValue(0);
      this.data.provinceId = prov.id;
      let city = this.$refs.picker.getSlotValue(1);
      this.data.cityId = city.id;
      this.data.bankCity = prov.name + city.name;

      this.popupAreaVisible = false;
    },
    saveBank() {
      let prov = this.$refs.picker2.getSlotValue(0);
      this.data.bankId = parseInt(prov.id);
      this.bankName = prov.name;
      this.popupBankVisible = false;
    }
  }
}

</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}

.shop-user-body {
  width: 95%;
  margin: auto;
}

</style>
